<template>
  <a-popover class="json-view-popover">
    <template slot="title">
      <div style="display: flex; justify-content: space-between">
        <strong>{{ title }}</strong>
        <a-icon type="copy" @click="copyText(text)" />
      </div>
    </template>
    <template slot="content">
      <div>
        <VueJsonPretty :data="JSON.parse(text)" />
      </div>
    </template>
    {{ text }}
  </a-popover>
</template>

<script>
import { copyText } from '@/utils/util'
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'

export default {
  name: 'JSONView',
  components: {
    VueJsonPretty,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    text: {
      type: String,
      default: '',
    },
  },
  methods: {
    copyText(text) {
      copyText(text).then((res) => {
        if (res) {
          this.$message.success('复制成功')
        } else {
          this.$message.error('复制失败')
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.json-view-popover {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
